<template>  
    <div class="container">
        <div class="music_admin_search">
            <el-form label-position="right" label-width="80px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="素材名：" prop="name">
                            <el-input v-model="searchData.name" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="5">
                        <el-form-item label="标签：" prop="">
                            <el-select v-model="searchData.tag" placeholder="请选择">
                                <el-option label="农产品" value="0"/>
                                <el-option label="贴剂" value="1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="状态：" prop="">
                            <el-select v-model="searchData.status" placeholder="请选择">
                                <el-option label="农产品" value="0"/>
                                <el-option label="贴剂" value="1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col align="right" :span="8">
                        <el-button type="primary" >搜索</el-button>
                        <el-button @click="resetSearch">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        {{ searchData.name }}
        {{ searchData.tag }}
        {{ searchData.status }}
        <div class="add_box">
            <p>音乐素材管理</p>
            <el-button type="primary" size="big" @click="add(0)">添加</el-button>
        </div>
        <div class="music_admin_tabel">
            <el-table
                class="table"
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                :row-class-name="getRowClassName"
                border
                fit
                highlight-current-row
                >
                <el-table-column align="center" label="编号" width="">
                    <template slot-scope="scope">
                    {{ scope.row.num }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="素材名" width="">
                    <template slot-scope="scope">
                    <!-- {{ scope.row.vipId | formatvipId }} -->
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="标签" width="">
                    <template slot-scope="scope">
                        {{ scope.row.tag }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="状态" width="">
                    <template slot-scope="scope">
                        {{ scope.row.tag }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="240">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="see(scope.$index)">查看</el-button>
                        <el-button
                            size="mini"
                            type="warning"
                            @click="edit(scope.$index)">编辑</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <musicStylePopUp
            :music-style-list="listobj"
            :music-style-visible.sync="musicStyleVisible"
            :title-num.sync="dialogTitleNum"
            :myindex.sync="dialogIndex"
            :type-name="'素材'"
        />
        <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" /> -->
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" />
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import musicStylePopUp from '@/components/musicAdmin/musicStylePopUp.vue'
export default {
    components: {musicStylePopUp, Pagination },
    data() {
        return {
            searchData: {
                name: '',
                tag: '',
                status: ''
            },
            musicStyleVisible: false,
            listLoading: false,
            dialogTitleNum:-1,
            dialogIndex: -1,
            list:[
                { num:0, name:'0000', tag: '0', status: '1' },
                { num:1, name:'1111', tag: '1', status: '0' },
                { num:2, name:'2222', tag: '0', status: '1' },
                { num:3, name:'3333', tag: '1', status: '1' },
                { num:4, name:'4444', tag: '0', status: '1' },
                { num:5, name:'5555', tag: '1', status: '0' },
                { num:6, name:'6666', tag: '0', status: '1' },
                { num:7, name:'7777', tag: '1', status: '1' },
                
            ],
            listobj: {},
            total:0,
            listQuery: {
                pageNum: 0,
                pageSize: 10
            },
        }
    },
    
    mounted() {
        // this.searchFn()
    },
    methods:{
        add(index) {
            this.listobj = { name: '', tag: '', status: ''}
            this.dialogTitleNum = 0
            this.dialogIndex = index
            this.musicStyleVisible = true
        },
        see(index){
            this.listobj = this.list[index]
            this.dialogTitleNum = 1
            this.dialogIndex = index
            this.musicStyleVisible = true
        },
        edit(index){
            this.listobj = this.list[index] 
            this.dialogTitleNum = 2
            this.dialogIndex = index
            this.musicStyleVisible = true
        },
        del(index, obj) {
            console.log(obj)
            this.$confirm('确定删除？').then(() => {
                
            })
        },
        getRowClassName({ rowIndex }) {
            // 判断奇偶行
            return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
        },
        resetSearch() {
            this.searchData.name = ''
            this.searchData.tag = ''
            this.searchData.status = ''
        },
        // fetchData() {
        //     this.listLoading = true
        //     const newData = this.objectCon(this.listQuery, this.search)
        //     console.log('newData:=>', newData)
        //     getOrderList(newData).then(response => {
        //         if (response.code === '200') {
        //         this.list = response.data.list
        //         console.log('订单数据：', this.list)
        //         this.total = response.data.total
        //         setTimeout(() => {
        //             this.listLoading = false
        //         }, 0.5 * 1000)
        //         } else {
        //         this.listLoading = false
        //         }
        //     })
        // },
    },
}


</script>

<style scoped>
.container {
    padding: 0 20px;
    box-sizing: border-box;
}
.music_admin_search {
    width: 100%;
    padding: 20px 0;
    background-color: #FFF;
}

.add_box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}


.music_admin_tabel {
    border-top: 1px solid #DDD;
}
</style>

<style>
/* 偶数行背景色 */
.even-row {
  background-color: #f9f9f9 !important;
}

/* 奇数行背景色 */
.odd-row {
  background-color: #ffffff !important;
}

.el-table__header th {
  font-weight: bold !important;
  color: #666;
}
</style>